<template>
    <div class="page-goods-list">

        <div class="header-left">
            分类:
            <el-input class="in" v-model="searchDate.category" />
            搜索关键词:
            <el-input class="in" v-model="searchDate.search" />
            <el-button @click="searchData">搜索</el-button>
        </div>
        <div class="header" @click="fetchData">
            <el-button>
                <el-icon>
                    <Refresh />
                </el-icon>
            </el-button>
        </div>





        <el-table :data=displayGoodsData>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="img1" label="图片" width="480">
                <template #default="scope">
                    <img :src="scope.row.img1" />
                    <!-- <img :src="scope.row.img2" />
                    <img :src="scope.row.img3" />
                    <img :src="scope.row.img4" /> -->
                </template>

            </el-table-column>
            <el-table-column prop="brand" label="品牌"></el-table-column>
            <el-table-column prop="category" label="类别"></el-table-column>
            <el-table-column prop="proname" label="详细"></el-table-column>
            <el-table-column prop="originprice" label="价格"></el-table-column>
        </el-table>
        <div class="footer">
            <el-pagination v-show="tableData.length>0" background layout="total, prev,pager,next"
                v-model:current-page="page" :page-size="pageSize" :total="tableData.length" />
        </div>

    </div>
</template>



<script>
import { getGoodsList, searchList } from "../../api/goods.js";
export default {
    name: "goods-list",
    data() {
        return {
            tableData: [],
            //单前页
            searchDate: {
                category: "",
                search: ""
            },
            page: 1,
            //每页多少条数据
            pageSize: 10,
        }
    },
    computed: {
        //根据page将tableDate裁切后展示
        displayGoodsData() {
            return this.tableData.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
        },
    },
    methods: {
        fetchData() {
            getGoodsList().then((data) => {
                this.tableData = data.data;
                console.log(data)
            });
        },
        searchData() {
            searchList(this.searchDate).then((data) => {
                this.tableData = data.data;
                console.log(data)
            });
        },
    },

    mounted() {
        this.fetchData();
    },
}
</script>



<style lang="scss" scoped>
.page-goods-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    img {
        display: block;
        height: 80px;
        float: left;
    }



    .header-left,
    .header,
    .footer {
        padding: 10px 0;
        display: flex;
        justify-content: flex-end;
        float: right;
    }

    .in {
        width: 200px;
    }

    .el-table {
        flex: 1;
    }
}
</style>